<template>
    <div class="personalHome myassets">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">杠杆账单</h2>
            <div class="personCon">
                <div class="infopanel">
                    <div class="pabelHead clearfix">
                        <h2 class="persontitle fl"> </h2>
                        <select class="headselect" style="width:118px;">
                            <option value="">收支方向</option>
                            <option value="B">币币委托</option>
                            <option value="S">杠杆委托</option>
                        </select>
                        <select class="headselect" style="width:118px;">
                            <option value="">全部类型</option>
                            <option value="B">币币委托</option>
                            <option value="S">杠杆委托</option>
                        </select>
                        <select class="headselect" style="width:118px;">
                            <option value="">全部交易对</option>
                            <option value="B">币币委托</option>
                            <option value="S">杠杆委托</option>
                        </select>
                        <select class="headselect" style="width:118px;">
                            <option value="">全部币种</option>
                            <option value="B">币币委托</option>
                            <option value="S">杠杆委托</option>
                        </select>
                        <el-date-picker
                            v-model="begin"
                            type="date"
                            :placeholder="$t('l.personal_147')"
                            class="fl left10"
                            >
                        </el-date-picker>
                        <el-date-picker
                            v-model="end"
                            type="date"
                            :placeholder="$t('l.personal_148')"
                            class="fl left10"
                            >
                        </el-date-picker>
                        <a class="headbtn fl" @click="getList" style="margin-left:30px;">{{$t('l.personal_131')}}</a>
                        <a class="headbtn fl" style="margin-left:4px;" @click="reset">{{$t('l.personal_132')}}</a>
                    </div>
                    <div class="scrollrecordbox">
                        <table class="recordtable autohei">
                            <thead>
                                <tr>
                                    <th class="padl20">时间</th>
                                    <th>交易对</th>
                                    <th>币种</th>
                                    <th>类型</th>
                                    <th>数量</th>
                                    <th>余额</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in orderlist" :key="index">
                                    <td class="padl20">{{item.createdDate}}</td>
                                    <td>BTC/USDT</td>
                                    <td>BTC</td>
                                    <td>借入</td>
                                    <td>1000</td>
                                    <td>1000</td>
                                    <td><a class="checkdetail">查看详情</a></td>
                                </tr>
                                
                            </tbody>
                        </table>
                    </div>
                    <div class="pagesbar" v-if="total>0">
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            hide-on-single-page
                            @current-change="handleCurrentChange"
                            :current-page="pageNum"
                            :page-size="pageSize"
                            :total="total">
                        </el-pagination>
                    </div>
                    <div class="nodata" v-else>
                        <img src="../../assets/images/nodata.png">
                        <p>{{$t('l.personal_140')}}</p>
                    </div>
                </div>
            </div>
        </div>

        <!--借币详情-->
        <div class="popWraper" v-show="false">
            <div class="popInter" style="width:500px;margin-left:-250px;">
                <div class="popHead">
                    <h2>借币详情</h2>
                    <i class="close"></i>
                </div>
                <div class="popbody" style="padding:30px 45px;">
                    <div class="popcon">
                        <div class="borrowdetail">
                            <div class="clearfix">
                                <span class="fl">时间</span>
                                <p class="fr">2019-12-25 15:12:58</p>
                            </div>
                            <div class="clearfix">
                                <span class="fl">类型</span>
                                <p class="fr">借币</p>
                            </div>
                            <div class="clearfix">
                                <span class="fl">账户</span>
                                <p class="fr">BTC/USDT</p>
                            </div>
                            <div class="clearfix">
                                <span class="fl">币种</span>
                                <p class="fr">BTC</p>
                            </div>
                            <div class="clearfix">
                                <span class="fl">数量</span>
                                <p class="fr">2.12454754</p>
                            </div>
                            <div class="clearfix">
                                <span class="fl">利率</span>
                                <p class="fr">0.098%</p>
                            </div>
                            <div class="clearfix">
                                <span class="fl">计息时间</span>
                                <p class="fr">2019-12-25 15:12:58</p>
                            </div>
                            <div class="clearfix">
                                <span class="fl">状态</span>
                                <p class="fr green">还币中</p>
                            </div>
                            <div class="clearfix">
                                <span class="fl">待还数量</span>
                                <p class="fr">2.12454754</p>
                            </div>
                            <div class="clearfix">
                                <span class="fl">待还利息</span>
                                <p class="fr">0.098384</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.borrowdetail{
    div{
        padding-bottom:16px;
        span{
            font-size:16px;
            color:#33385E;
            line-height:24px;
        }
        p{
            font-size:16px;
            color:#33385E;
            line-height:24px;
            &.green{
                color:#0DA88B;
            }
        }
    }
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    
    .pagesbar{
        width:100%;
        text-align:center;
        margin-top:40px;
    }
    .infopanel{
        background:#fff;
        padding:40px 46px 46px 34px;
        min-height: 100%;
        box-sizing: border-box;
        .headput{
            width:170px;
            height:32px;
            line-height:32px;
            float:left;
            margin-left:5px;
        }
        .grouptitle{
            float:left;
            padding-left :20px;
            font-size:16px;
            color:#33385E;
            line-height:32px;
            padding-right:10px;
        }
        .headselect{
            float:left;
            width:80px;
            height:32px;
            background:rgba(255,255,255,1);
            border-radius:4px;
            border:1px solid rgba(221,224,235,1);
            text-indent:10px;
            margin-right:30px;
        }
        .padl20{
            padding-left:20px;
        }
        .left10{
            margin-left:10px;
        }
        .checkbar{
            padding-left:20px;
            padding-top:5px;
            cursor:pointer;
            position: static;
            i{
                display:inline-block;
                vertical-align:middle;
                width:14px;
                height:14px;
                margin-right:4px;
                border-radius:2px;
                border:1px solid rgba(221,224,235,1);
                &.active{
                    background:url(../../assets/images/checkicon.png) no-repeat center;
                }
            }
            span{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:22px;
                padding-right:6px;
            }
        }    
    }
    .el-date-editor.el-input{width: 150px;height: 32px;}
    .el-input__inner{height:34px;}
    .el-input__icon{line-height:34px;}
}
.myassets{
    .pabelHead{
        border-bottom:1px solid #E9EEF4;
        padding-bottom:15px;
    }
    .scrollrecordbox{
        padding-top:14px;
    }
    .checkdetail{
        color:#7373F7;
        cursor:pointer;
    }
}
</style>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
export default {
    components: {
        PersonalHeader,
        PersonalSide
    },
    data () {
        return {
            orderlist:[],
            actionType:"",
            pageNum:1,
            pageSize:10,
            total:0,
            pair:"",
            begin:"",//起始时间
            end:"",//终止时间
            isHideCanceled:0//是否隐藏已撤销 1 是 0 否
        }
    },
    created(){
      this.getList();
    },
    methods:{
        handleCurrentChange(val) {
            this.pageNum = val;
            this.getList();
        },
        hideclose(){
            let that = this;
            this.pageNum = 1;
            that.getList();
        },
        reset(){
            let that = this;
            that.actionType = "";
            that.pair = "";
            that.begin = "";
            that.end = "";
            that.isHideCanceled = 0;
            that.getList();
        },
        //列表
        async getList(){
            let that = this;
            let res = await api.historyOrderList({
                actionType:that.actionType,
                pageNum:that.pageNum,
                pageSize:that.pageSize,
                pair:that.pair,
                begin:that.begin,
                end:that.end,
                isHideCanceled:that.isHideCanceled?1:0
            })
            if(res.data.code==0){
                that.orderlist = [];
                that.orderlist = res.data.data.records;
                that.total = res.data.data.total;
                that.pageNum = res.data.data.current;
            }else{
                that.$layer.msg(res.data.msg);
            }
        }
    },
    mounted(){
        
    }
}
</script>


